<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>任务
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
            v-if="hasPerm('taskEditPost')"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="任务类型">
          <el-select v-model="objForm.type" placeholder="任务类型">
            <el-option label="阅读任务" :value="1"></el-option>
            <el-option label="下载任务" :value="2"></el-option>
            <el-option label="视频任务" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务标题">
          <el-input v-model="objForm.title" placeholder="任务标题"></el-input>
        </el-form-item>

        <el-form-item label="任务内容">
          <el-input type="textarea" v-model="objForm.content"></el-input>
        </el-form-item>

        <el-form-item label="奖励金额">
          <el-input v-model="objForm.price" placeholder="奖励金额"></el-input>
        </el-form-item>

        <el-form-item label="数量">
          <el-input v-model="objForm.number" placeholder="数量"></el-input>
        </el-form-item>

        <el-form-item label="外网url">
          <el-input v-model="objForm.url" placeholder="外网url"></el-input>
        </el-form-item>

        <el-form-item label="标签">
          <el-input v-model="temporary.label" placeholder="标签" style="width: 20%;"></el-input>
          <el-button type="text" @click="add_label" style="width: 20%;">添加</el-button>

          <div>
            <el-tag v-for="(tag,index) in objForm.label" :key="index" closable @close="tagClose(tag)">{{tag}}</el-tag>
          </div>
        </el-form-item>

        <el-form-item label="是否上线">
          <el-switch
            v-model="objForm.status"
            active-color="#13ce66"
            :active-value="1"
            inactive-color="#666"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
export default {
  mixins: [commonEdit],
  data() {
    return {
      apiName: "task",
      backRoute: "taskIndex", //成功跳转地址
      objForm: {
        id: "",
        title: "", //标题
        content: "", //内容
        label: [], //标签
        price: "", //奖励金额、
        type: "", //任务类型、
        number: "", //数量
        url: "", //外网url
        status: "" //上线状态
      },
      temporary: {
        label: "" //临时
      } //临时
    };
  },
  methods: {
    add_label() {
      //添加标签
      this.objForm.label.push(this.temporary.label); //添加标签
    },
    tagClose(tag) {
      this.objForm.label.splice(this.objForm.label.indexOf(tag), 1); //删除标签
    },
    afterGetInfo() {
      //初始化
      this.objForm.label = this.objForm.label
        ? this.objForm.label.split(",")
        : [];
    },
    beforeSubmit() {
      //提交前
      this.objForm.label = this.objForm.label.join(",");
      // window.console.log(this.objForm.label.join(","))
    }
  },
  created() {}
};
</script>
<style>
.el-tag {
  margin-right: 5px;
}
</style>
